<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/axios.js"></script>
</head>
<body>
    
    <ul class="list">
        <li></li>
    </ul>
    <script>
        // 获取所有收藏的书籍, 渲染
        axios.get('/shoucang').then(result => {
            render(result.data);
        });
        let list = document.querySelector('.list');

        function render(arr){
            list.innerHTML = arr.map(item => `<li> <span>${item}</span> <span>取消收藏</span> </li>`).join('');
        }

        // 给取消收藏添加点击方法
        list.onclick = function(e){
            let tar = e.target;
            if(tar.innerHTML === '取消收藏'){
                if(confirm('是否取消收藏')){
                    // 获取书的名字
                    let bookName = tar.previousElementSibling.innerHTML;
                    // 把服务器对应的数据修改正确 ,把书名上传到服务器
                    axios.get(`/noLike/bookName/${bookName}`).then(result => {
                        console.log(result.data);
                        if(result.data.code === 3){
                            // 删除成功
                            // 点击的是确定 , 把这个元素删除
                            tar.parentNode.remove();
                        }
                    });
                }
            }
        }

    </script>

</body>
</html>